<template>
    <div class="hid">
        <div class="page" v-for="item in dataList" :key="item.goodsId">
            <van-checkbox-group v-model="checkedResult" @change="checkedResultChange">
                <van-checkbox :name="item" :key="item.goodsId" />
            </van-checkbox-group>
            <div class="page__img" @click="jump(item)">
                <img :src="item.goodsLogo" />
            </div>
            <div class="page__content" @click="jump(item)">
                <p>{{ item.goodsName }}</p>
                <ul>
                    <li>¥{{ item.goodsPrice }}</li>
                    X{{ item.allNum }}
                </ul>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { getCartGoodsList, type CatsTree } from '@/api'

const props = defineProps<{
    isIndeterminate: boolean,
    isCheckAll: boolean
}>()
const emit = defineEmits(['update:change'])
// 路由
const router = useRouter()

// 存放数据
const list = ref<CatsTree.myCart | null>(null)

// 单选选中数据
const checkedResult = ref([]);

// 获取购物车数据
async function getCartList() {
    const { data }: any = await getCartGoodsList()
    list.value = data
}

// 弄出页面渲染的数据
const filterList = computed(() => {
    const data = list.value
    // @ts-ignore
    // 出去返回数据的id
    const tmp = data?.map(item => item.params) as CatsTree.goodsItem[];

    // 将goodsId且type一致的覆盖为 1条
    const mergeTmp: CatsTree.goodsItem[] = [];

    tmp?.forEach(item => {
        const index = mergeTmp.findIndex(
            ele => ele.goodsId === item.goodsId && ele.type === item.type
        );
        if (index !== -1) {
            // 重复出现的
            //@ts-ignore
            mergeTmp[index].allNum += 1; // 将重复的数量增加1
        } else {
            //@ts-ignore
            mergeTmp.push({ ...item, allNum: 1 }); // 添加新的项，并设置数量为1
        }
    });
    // console.log(mergeTmp);
    return mergeTmp
})

// 根据计算属性重新获取渲染的数据为ref模式（复选框用）
const dataList = ref<CatsTree.goodsItem[]>([])

watch(filterList, (newVal) => {
    dataList.value = newVal;
});

// 点击卡片跳详情
function jump(e: any) {
    router.push({
        name: 'detail',
        params: { goodsId: e.goodsId, type: e.type }
    })
}
const checkedResultChange = (ele: string[]) => {
    emit('update:change', ele, checkedResult)
}

// 全选逻辑，供父组件用
function allChange() {
    if (props.isCheckAll) {
        checkedResult.value = []
    } else {
        // @ts-ignore
        checkedResult.value = dataList.value
    }
}

onMounted(() => {
    getCartList()
})

defineExpose({
    dataList,
    allChange
})
</script>

<style lang="scss" scoped>
.hid {
    overflow: hidden;
}

.page {
    display: flex;
    flex-wrap: nowrap;
    height: 100px;
    position: relative;
    padding: 5px;

    ::after {
        content: '';
        position: absolute;
        height: calc(100% - 1px);
        width: calc(100% - 1px);
        top: 0;
        right: 0;
        bottom: 0;
        left: 30px;
        border: 1px solid transparent;
        border-bottom: 1px solid #ccc;
    }

    &__img {
        height: 100px;
        width: 80px;
        margin-left: 8px;

        img {
            display: block;
            height: 100%;
            width: 100%;
            border-radius: 5px;
        }
    }

    &__content {
        height: 100px;
        flex: 1;
        margin: 0 5px;
        padding: 0 16px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        p {
            width: 100%;
            height: 50px;
        }

        ul {
            display: flex;
            justify-content: space-between;
        }
    }

    .van-checkbox-group {
        margin: auto;
        width: 20px;
        position: relative;

        ::after {
            border: none;
        }
    }

    .van-checkbox {
        z-index: 999;

        ::after {
            border: none;
        }
    }
}
</style>